import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class AnimatedPage extends StatefulWidget {
  const AnimatedPage({super.key});

  @override
  State<AnimatedPage> createState() => _AnimatedPageState();
}

class _AnimatedPageState extends State<AnimatedPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Animated')),
      body: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool flag=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() {
            flag=!flag;
          });
        },
      ),
      body: Center(
        /// 创建一个带动画效果的容器组件
        ///
        /// 该容器会在状态变化时自动执行动画过渡效果，包括尺寸、位置和颜色的变化
        ///
        /// duration: 动画持续时间，设置为1秒100毫秒
        /// width: 容器宽度，根据flag状态在200和300之间切换
        /// height: 容器高度，根据flag状态在200和300之间切换
        /// color: 容器背景色，固定为黄色
        /// transform: 容器变换矩阵，根据flag状态进行平移变换
      child: AnimatedContainer(
          duration: const Duration(seconds: 1,milliseconds: 100),
          width: flag?200:300,  /// width
          height: flag?200:300, /// height
          color: Colors.yellow,
          transform: flag?Matrix4.translationValues(0,0,0):Matrix4.translationValues(100,100,0),
        ),
      ),
    );
  }
}
